<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="childFormVisible"
      :width="dialogWidth"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="mt-dialog"
      @close="hide"
    >
      <el-form
        v-if="action !== 'delete'"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="80px"
        style="width: 80%; margin-left:10%;"
      >
        <el-form-item label="名称">
          <el-tag v-if="disabled" type="info">{{ temp.name }}</el-tag>
          <el-input v-else v-model="temp.name" type="textarea" />
        </el-form-item>
        <el-form-item label="标签">
          <el-tag
            v-for="t in temp.tag"
            :key="t"
            :closable="!disabled"
            :disable-transitions="false"
            @close="handleClose(t)"
          >
            {{ t }}
          </el-tag>
          <el-input
            v-if="inputVisible && !disabled"
            ref="saveTagInput"
            v-model="inputValue"
            class="input-new-tag"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button v-else-if="!disabled" class="button-new-tag" size="small" @click="showInput">添加标签</el-button>

        </el-form-item>
        <el-form-item label="原价">
          <el-tag v-if="disabled" type="info">{{ temp.original_price }}</el-tag>
          <el-input v-else v-model="temp.original_price" type="number" />
        </el-form-item>

        <el-form-item v-if="action === 'view'" label="创建时间">
          <el-tag v-if="disabled" type="info">{{ temp.create_at }}</el-tag>
          <el-input v-else v-model="temp.create_at" />
        </el-form-item>
        <el-form-item v-if="action === 'view'" label="更新时间">
          <el-tag v-if="disabled" type="info">{{ temp.update_at }}</el-tag>
          <el-input v-else v-model="temp.update_at" />
        </el-form-item>
      </el-form>
      <div v-if="showBtn" slot="footer" class="dialog-footer" align="center">
        <el-button v-if="action === 'delete'" type="danger" @click="confirm">确认</el-button>
        <el-button v-else type="primary" @click="confirm">确认</el-button>
        <el-button type="info" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Post, Put, Delete } from '@/api/erp/elicink/product'

export default {
  name: 'Product',
  props: ['model', 'action', 'dialogTitle', 'dialogFormVisible'],
  data() {
    return {
      showBtn: this.action !== 'view',
      disabled: false,
      temp: {},
      childFormVisible: this.dialogFormVisible,
      inputVisible: false,
      inputValue: '',
      dialogWidth: ''
    }
  },
  computed: {
    c_id: function() {
      return this.$route.params.c_id
    }
  },
  watch: {
    dialogFormVisible(v) {
      this.childFormVisible = v

      this.showBtn = this.action !== 'view'
      switch (this.action) {
        case 'create':
          this.dialogWidth = '28%'
          this.disabled = false
          this.resetTemp()
          console.log('product create..', this.temp)
          break
        case 'delete':
          this.dialogWidth = '30%'
          this.temp = this.model
          this.disabled = false
          break
        case 'edit':
          this.dialogWidth = '30%'
          this.disabled = false
          this.temp = Object.assign({}, this.model)
          break
        case 'view':
          this.dialogWidth = '28%'
          this.disabled = true
          this.temp = this.model
          break
      }
    }
  },
  methods: {
    resetTemp() {
      this.temp = {
        name: '',
        tag: [],
        original_price: '',
        catalog_id: this.c_id
      }
    },
    confirm() {
      const _data = this.temp
      switch (this.action) {
        case 'create':
          Post(this.temp).then((response) => {
            this.childFormVisible = false
            this.$emit('reload')
            this.notify('添加成功')
          })
          break
        case 'delete':
          Delete(_data.id).then((response) => {
            this.childFormVisible = false
            this.$emit('reload')
            this.notify('删除成功')
          })
          break
        case 'edit':
          Put(_data.id, {
            name: _data.name,
            tag: _data.tag.join(','),
            original_price: _data.original_price
            // catalog_id
          }).then((response) => {
            this.childFormVisible = false
            this.$emit('reload')
            this.notify('更新成功')
          })
          break
      }
    },
    cancel() {
      console.log(222, 'click product cancel')
      this.childFormVisible = false
    },
    hide() {
      console.log('product 暂时数据', this.temp)
      this.$emit('cancelDialog', false)
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    handleClose(t) {
      this.temp.tag.splice(this.temp.tag.indexOf(t), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue && this.temp.tag.indexOf(inputValue) === -1) {
        this.temp.tag.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .mt-dialog >>> span.el-dialog__title {
    word-break: normal;
    width: auto;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
  }
</style>
